<template>
    <div class="page-wrap">
        <div class="page-cont">
            <div>
                <a-input-search v-model:value="searchVal" placeholder="请输入" style="width: 300px" enter-button @search="handleSearch" />
            </div>
            <a-divider />
            <div>
                <flexbox>
                    <span>搜索历史：</span>
                    <a-tag
                        closable
                        v-for="item of searchHistoryList"
                        :key="item.id"
                        style="cursor: pointer"
                        @close="handleClear(item.id)"
                        @click="handleCheck(item)"
                    >
                        {{ item.name }}
                    </a-tag>
                </flexbox>
            </div>
            <div>
                <a-tabs v-model:activeKey="activeKey">
                    <a-tab-pane v-for="(item, index) of tabList" :key="index">
                        <template #tab>
                            <span>{{ item.title }}（{{ item.count || 0 }}）</span>
                        </template>
                        <component :ref="setCompsItemRef(item)" :is="item.comName" :keyword="keyword" />
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import store from '@/store';
import ProTab from './components/ProTab.vue';
import TaskTab from './components/TaskTab.vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, unref, reactive, toRefs, computed } from 'vue';
export default defineComponent({
    components: {
        SearchOutlined,
        ProTab,
        TaskTab
    },
    setup() {
        const state = reactive<any>({
            keyword: '',
            searchVal: '',
            activeKey: 0,
            loading: false,
            searchHistoryList: [],
            form: {}
        });
        const compsItemRefs: any = reactive({});
        const tabList = computed(() => {
            return [
                { title: '产品需求', comName: 'ProTab', count: unref(compsItemRefs.ProTab)?.total },
                { title: '业务需求', comName: 'TaskTab', count: unref(compsItemRefs.TaskTab)?.total }
            ];
        });
        const setCompsItemRef = (item) => (el) => {
            compsItemRefs[`${item.comName}`] = el;
        };
        const handleSearch = (val) => {
            state.keyword = val;
            getHistoryList();
            api.queryHistoryModel.save({
                empId: store.getters.userInfo.employeeDTO.empId,
                name: val,
                tenantId: 'teep-pmp'
            });
        };
        const handleClear = async (id) => {
            const query = {
                id
            };
            const { success } = await api.queryHistoryModel.delete(query);
            if (success) {
                getHistoryList();
            }
        };
        const handleCheck = (item) => {
            handleClear(item.id);
            state.searchVal = item.name;
            state.keyword = item.name;
        };
        const getHistoryList = async () => {
            const query = {
                tenantId: 'teep-pmp'
            };
            const { success, info } = await api.queryHistoryModel.getQueryHistories(query);
            if (success) {
                state.searchHistoryList = [...info];
            }
        };
        getHistoryList();
        return {
            ...toRefs(state),
            tabList,
            handleSearch,
            handleClear,
            handleCheck,
            setCompsItemRef
        };
    }
});
</script>

<style lang="less" scoped>
.page-wrap {
    height: calc(100vh - 64px);
    position: relative;
    .page-cont {
        background: #fff;
        padding: 24px;
        height: 100%;
        ::v-deep(.ant-divider-horizontal) {
            margin: 18px 0;
        }
    }
}
</style>